<template>
	<view class="register">
		<image src="https://www.6dbx.com/static/ydImg/ydlogo.png" mode="" class="logo"></image>
		<view class="register_form">
			<view class="register_formItem">
				<view class="register_formItem_left">
					<image src="../../static/img/loginUser.png" mode=""></image>
					<u--input placeholder="请输入用户名或手机号码" border="none" v-model="mobile"
						:customStyle="{width:'400rpx'}"></u--input>
				</view>
			</view>
			<view class="register_formItem">
				<view class="register_formItem_left">
					<image src="../../static/img/loginPass.png" mode=""></image>
					<u--input placeholder="验证码" border="none" v-model="yzm"></u--input>
				</view>
				<view class="register_formItem_right">
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
					<view class="getCode" @tap="getCode">
						{{tips}}
					</view>
				</view>
			</view>
			<view class="register_formItem">
				<view class="register_formItem_left">
					<image src="../../static/img/loginLock.png" mode=""></image>
					<u--input placeholder="请输入密码" border="none" v-model="password" type="password"></u--input>
				</view>
			</view>
			<view class="register_formItem">
				<view class="register_formItem_left">
					<image src="../../static/img/loginLock.png" mode=""></image>
					<u--input placeholder="请再次确认密码" border="none" v-model="passwordAgain" type="password"></u--input>
				</view>
			</view>
		</view>
		<view class="register_btn" @click="goRegister">
			立即注册
		</view>
		<view class="register_footer" @click="goLogin">
			已有账号，立即登录
		</view>
	</view>
</template>

<script>
	import {
		getVCode,
		getVCodeLogin
	} from '@/api/index.js'
	export default {
		data() {
			return {
				mobile: '',
				yzm: '',
				tips: '',
				seconds: 60,
				phoneNumberPattern: /^1[3-9]\d{9}$/,
				password:'',
				passwordAgain:''
			}
		},
		methods: {
			async goRegister(){
				if(this.mobile == ''){
					return uni.showToast({
						icon:'none',
						title:'请输入手机号'
					})
				}
				if(this.yzm == ''){
					return uni.showToast({
						icon:'none',
						title:'请输入验证码'
					})
				}
				if(this.password == ''){
					return uni.showToast({
						icon:'none',
						title:'请输入密码'
					})
				}
				if(this.passwordAgain != this.password){
					return uni.showToast({
						icon:'none',
						title:'两次密码输入不一致'
					})
				}
				let data = {
					account:this.mobile,
					userpwd:this.password,
					yzm:this.yzm
				}
				const res = await getVCodeLogin(data)
				// console.log(res);
				uni.showToast({
					icon:'none',
					title:'注册成功'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},500)
			},
			goLogin(){
				uni.navigateBack()
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (this.mobile == '') {
						return uni.showToast({
							icon: 'none',
							title: '请输入手机号'
						})
					}
					if (!this.phoneNumberPattern.test(this.mobile)) {
						return uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号'
						})
					}
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await getVCode({
						mobile: this.mobile
					})
					// console.log(res);
					uni.hideLoading();
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.register {
		min-height: 100vh;

		.logo {
			margin: 80rpx auto 78rpx;
			width: 204rpx;
			height: 100rpx;
			display: block;
		}
		.register_footer{
			width:fit-content;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #3897F9;
			margin: 0 auto;
		}
		.register_btn{
			width: 560rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #F43107 0%, #FF9289 50%, #F43107 100%);
			border-radius: 100rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin: 98rpx auto 20rpx;
		}

		.register_form {
			padding: 0 94rpx;

			.register_formItem {
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #A9B1BE;
				margin-bottom: 58rpx;

				.register_formItem_left {
					display: flex;
					align-items: center;

					image {
						width: 28rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}
				}

				.register_formItem_right {
					.getCode {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #3897F9;
					}
				}
			}
		}
	}
</style>